<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
    <script src="/ctbuc/resource/vue.js"></script>
    <link rel="stylesheet" href="/ctbuc/resource/element.css">
    <script src="/ctbuc/resource/element.js"></script>
    <script src="/ctbuc/resource/axios.min.js"></script>
<style>
.login-box {
	border: 1px solid #DCDFE6;
	width: 350px;
	height: 600px;
    margin: 0 auto;
    margin-top: 40px;
	padding: 25px 35px;
	border-radius: 5px;
	box-shadow: 0 0 25px #dddfe4;
}
.el-form-item {
    margin-bottom: 20px;
}
.avatar-uploader{
    height: 100px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
.el-button{
    font-size: 15px;
    width:300px;
    display: block;
    margin: 0 auto;
    margin-top: 25px;
    background-color: green;
	border-color: green;
}
.el-button:hover{
	background-color: rgb(7, 146, 7);
	border-color: rgb(7, 146, 7);
}
</style>

</head>
<body>
	<div class="login-box" id="app" >
        <el-form :label-position="labelPosition" :model="registerForm" :rules="rules" ref="registerForm" label-width="70px">
            <el-form-item label="学 号：" prop="stuid">
              <el-input v-model="registerForm.stuid" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>

            <el-form-item label="账 号：" prop="username">
                <el-input v-model="registerForm.username"></el-input>
            </el-form-item>

            <el-form-item label="密 码：" prop="password">
                <el-input v-model="registerForm.password" show-password></el-input>
            </el-form-item>

            <el-form-item label="生 日：" required>
                <el-col :span="12">
                  <el-form-item prop="birth">
                    <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birth" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item label="姓 名：" prop="realname">
                <el-input v-model="registerForm.realname"></el-input>
            </el-form-item>

            <el-form-item label="性 别：" prop="sex">
                <el-radio-group v-model="registerForm.sex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>

            <el-form-item label="学 院：" prop="institute">
              <el-select v-model="registerForm.institute" placeholder="请选择所属学院">
                <el-option label="计信学院" value="计信学院"></el-option>
                <el-option label="管工学院" value="管工学院"></el-option>
                <el-option label="经济学院" value="经济学院"></el-option>
                <el-option label="金融学院" value="金融学院"></el-option> 
                <el-option label="艺术学院" value="艺术学院"></el-option>
                <el-option label="会计学院" value="会计学院"></el-option>
              </el-select>
            </el-form-item>
        
            <!--upload传递参数使用:data 类型object-->
<!--            <el-form-item label="头 像：" prop="userIcon">-->
<!--                <el-upload-->
<!--                class="avatar-uploader"-->
<!--                action="http://localhost:8181/ctbuc/file/upload"-->
<!--                v-model="registerForm.userIcon"-->
<!--                :show-file-list="false"-->
<!--                :on-success="handleAvatarSuccess"-->
<!--                :before-upload="beforeAvatarUpload"-->
<!--                :data="uploadData">-->

<!--                <img v-if="registerForm.userIcon" :src="registerForm.userIcon" class="avatar">-->
<!--                <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleCreate"></i>-->
<!--                </el-upload>-->
<!--            </el-form-item>-->
        
            <el-button type="success" @click="submitForm('registerForm')">注 册</el-button>

          </el-form>
	</div> 
</body>
 
<script type="text/javascript">
	const app = new Vue({
		el : '#app',
		data() {
            return {
                labelPosition: 'left',
                registerForm: {
                },
                // uploadData:{
                //     username:"",
                //     fileType:"userimg"
                // },
                rules: {
                    stuid: [
                        { required: true, message: '请输入您的学号', trigger: 'blur' },
                        { len: 10,message: '学号必须为10位数字', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 10, message: '密码长度为6~10位', trigger: 'blur' }
                    ],
                    birth: [
                        { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
                    ],
                    realname: [
                        {trigger: 'blur' ,validator: (rule, value, callback) => {
                                //中文验证
                                var reg = /[^\u4e00-\u9fa5]/;
                                if (value === "") {
                                    callback(new Error("请输入您的真实姓名"));
                                } else if (reg.test(value)) {
                                    callback(new Error("姓名必须为中文"));
                                } else {
                                    callback();
                                }
                            }}
                    ],
                    sex: [
                        { required: true, message: '请选择您的性别', trigger: 'change' }
                    ],
                    institute: [
                        { required: true, message: '请选择您的学院', trigger: 'change' }
                    ],
                    // userIcon: [
                    //     { required: true, message: '请上传您的头像', trigger: 'change' }
                    // ]

                }
            };
        },
        methods: {
            // handleCreate() {
            //     this.registerForm={
            //         userIcon:"",
            //         username:this.registerForm.username,
            //         password:this.registerForm.password,
            //         birth:this.registerForm.birth,
            //         stuid:this.registerForm.stuid,
            //         realname:this.registerForm.realname,
            //         sex:this.registerForm.sex,
            //         institute:this.registerForm.institute
            //     };
            // },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    fd = new FormData();
                    fd.append("username",this.registerForm.username);
                    fd.append("password",this.registerForm.password);
                    fd.append("stuid",this.registerForm.stuid);
                    fd.append("institute",this.registerForm.institute);
                    fd.append("sex",this.registerForm.sex);
                    fd.append("birth",this.registerForm.birth);
                    fd.append("userimg","");
                    fd.append("realname",this.registerForm.realname);
                    axios({
                        url: 'http://localhost:8181/ctbuc/user/register',   //所要请求的地址
                        data: fd,       //携带的参数
                        method: 'post',   //请求方式
                        headers: {
                            'Content-Type': 'multipart/form-data',
                        }
                    }).then((res)=>{
                        console.log(res.data);
                        if(res.data.state){
                            this.$message({
                                duration:1500,
                                message : res.data.msg+"等待跳转到主页面...",
                                type : 'success',
                            })
                            setTimeout(()=>{
                                location.href="/ctbuc/user/loginPage";
                            },1500);
                        }else {
                            this.$message({
                                duration:700,
                                message : res.data.msg,
                                type : 'error',
                            })
                        }

                    });
                } 
                else {
                    this.$message({
						message : '标记*号为必填项！',
						type : 'error',
					})
                    return false;
                }
                });
			},

            // handleAvatarSuccess(res, file) {
            //     this.registerForm.userIcon = URL.createObjectURL(file.raw);
            //     console.log(res);
            //     this.registerForm.userimg=res.obj;
            //     console.log(this.registerForm.userimg);
            // },
            // beforeAvatarUpload(file) {
            //     //如果username还没写，就通过时间创建其路径
            //     console.log(this.registerForm.username);
            //     if(this.registerForm.username==""){
            //         var date1=new Date();
            //         var year=date1.getFullYear();
            //         var month=date1.getMonth()+1;
            //         var day=date1.getDate();
            //         var hours=date1.getHours();
            //         var minutes=date1.getMinutes();
            //         var seconds=date1.getSeconds();
            //         this.uploadData.username = "bydate"+year+month+day+hours+minutes+seconds;
            //     }else{
            //         this.uploadData.username = this.registerForm.username;
            //     }
            //     // const isJPG = file.type === 'image/jpeg';
            //     // const isLt2M = file.size / 1024 / 1024 < 2;
            //     //
            //     // if (!isJPG) {
            //     // this.$message.error('上传头像图片只能是 JPG 格式!');
            //     // }
            //     // if (!isLt2M) {
            //     // this.$message.error('上传头像图片大小不能超过 2MB!');
            //     // }
            //     // return isJPG && isLt2M;
            // },
            created(){
            }
        }
	})
	
</script>
</html>